<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>

</head>
<body>
<table class="layui-hide" id="my-data-table" lay-filter="my-data-table"></table>
<div style="display: flex;justify-content: center;">
    <div id="test1" ></div>
</div>

<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    var dataUrl = 'http://localhost:9086/data';

    layui.use(['table','laypage'], function(){
        var table = layui.table;
        var laypage = layui.laypage;

        //展示已知数据
        table.render({
            elem: '#my-data-table',
            url:dataUrl
            ,text:{
                none: '暂无相关数据'
            }
            ,loading:true
            ,id: 'my-data-table'
            ,skin: 'line' //表格风格
            ,even: true
            ,page: false //不使用表格分页
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80}
                ,{field: 'username', title: '用户名', width: 120}
                ,{field: 'email', title: '邮箱', minWidth: 150}
                ,{field: 'sign', title: '签名', minWidth: 160,templet: function(d){
                    return 'ID：'+ d.sign +'<span style="color: #c00;"></span>'
                }}
                ,{field: 'sex', title: '性别', width: 80}
                ,{field: 'city', title: '城市', width: 100}
                ,{field: 'experience', title: '积分', width: 80, sort: true}
                ,{fixed: 'right', width:150, align:'center', toolbar: '#barOption'}
            ]]
        });

        laypage.render({
            elem: 'test1'
            ,count: 70 //数据总数，从服务端得到
            ,jump: function(obj, first){
                //请求分页的url
                var reLoadUrl = dataUrl+'?page='+obj.curr+'&pageSize=10';

                if(!first){
                    table.reload('my-data-table', {
                        url: reLoadUrl
                    });
                }
            }
        });
        //监听工具条
        table.on('tool(my-data-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
                alert(1);
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

    });

</script>

</body>
</html>